<%--
  Created by IntelliJ IDEA.
  User: 王旭东
  Date: 2024/12/17
  Time: 19:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>宠物</title>
    <link href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/admin/metisMenu.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/admin/dataTables.bootstrap.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/admin/sb-admin-2.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/admin/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="${pageContext.request.contextPath}/static/css/admin/boot-crm.css" rel="stylesheet" type="text/css">
    <style>
        .panel-heading {
            background-color: #337ab7;
            border-color: #2e6da4;
            font-size: 14px;
            padding-left: 20px;
            height: 36px;
            line-height: 36px;
            color: white;
            position: relative;
            cursor: pointer;
        }

        /*转成手形图标*/
        .panel-heading span {
            position: absolute;
            right: 10px;
            top: 12px;
        }
        table{
            border-bottom: 1px solid #ddd !important;
        }
    </style>
</head>
<body>
<div id="wrapper">
    <!-- 导航栏部分 -->
    <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <a class="navbar-brand" href="">流浪猫狗管理系统</a>
        </div>
        <!-- 导航栏右侧图标部分 -->
        <!-- 导航栏右侧图标部分 -->
        <ul class="nav navbar-top-links navbar-right">
            <!-- 消息通知 end -->
            <!-- 用户信息和系统设置 start -->
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="/admin/developing">
                    <i class="fa fa-user fa-fw"></i>
                    <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-user ">
                    <li>
                        <input type="hidden" id = "currentAdminId" value="${admin.id}">
                    </li>
                    <li><a href="/admin/developing"><i class="fa fa-user fa-fw"></i>
                        管理员：${admin.adminName}</a>
                    </li>
                    <li><a href="/admin/developing"><i class="fa fa-gear fa-fw"></i> 系统设置</a></li>
                    <li class="divider"></li>
                    <li>
                        <a href="${pageContext.request.contextPath}/admin/AdminLogin">
                            <i class="fa fa-sign-out fa-fw"></i>退出登录
                        </a>
                    </li>
                </ul>
            </li>
            <!-- 用户信息和系统设置结束 -->
        </ul> <!-- 左侧显示列表部分 start-->
        <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                <!-- 教学管理  折叠的分组列表 -->
                <div class="panel-heading" id="collapseListGroupHeading3" data-toggle="collapse" data-target="#collapseListGroup3" role="tab">
                    <h4 class="panel-title">
                        后台管理 <span class="fa fa-chevron-up right"></span>
                    </h4>
                </div>
                <div id="collapseListGroup3" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="collapseListGroupHeading3">
                    <ul class="list-group">
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/UserList">
                                <i class="fa fa-flash fa-fw"></i> 用户信息
                            </a>
                        </li>
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/AdminsList">
                                <i class="fa fa-flash fa-fw"></i> 管理员信息
                            </a>
                        </li>
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/PetList">
                                <i class="fa fa-sitemap fa-fw"></i> 宠物管理
                            </a>
                        </li>
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/AdoptList">
                                <i class="fa fa-sitemap fa-fw"></i> 领养管理
                            </a>
                        </li>
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/CommentList">
                                <i class="fa fa-sitemap fa-fw"></i> 评论管理
                            </a>
                        </li>
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/BlogListService">
                                <i class="fa fa-sitemap fa-fw"></i> 团队活动管理
                            </a>
                        </li>
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/ApplyList">
                                <i class="fa fa-sitemap fa-fw"></i> 志愿者的申请
                            </a>
                        </li>
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/agreeList">
                                <i class="fa fa-sitemap fa-fw"></i> 同意领养列表
                            </a>
                        </li>
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/disagreeList">
                                <i class="fa fa-sitemap fa-fw"></i> 不同意领养列表
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div><!-- 左侧显示列表部分 end-->
    </nav>
    <!-- 用户信息查询部分  start-->
    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">用户评论管理</h1>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <!-- /.row -->
        <div class="panel panel-default">
            <!-- 搜索部分 -->
            <div class="panel-body">
                <form class="form-inline" method="get" action="" id="searchForm">
                    <div class="form-group">
                        <label for="findByName">用户名</label>
                        <input type="text" class="form-control" id="findByName" name="userName">
                    </div>
                    <button type="submit" class="btn btn-primary">查询</button>
                </form>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">用户评论列表</div>
                    <!-- /.panel-heading -->
                    <table class="table table-bordered table-striped" id="comment_table">
                        <thead>
                        <tr>

                            <th>评论编号</th>
                            <th>评论人</th>
                            <th>评论动物</th>
                            <th>评论内容</th>
                            <th>评论时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach items="${commentList}" var="comment">
                            <tr>
                                <td>${comment.id}</td>
                                <td>${comment.user.userName}</td>
                                <td>${comment.pet.petName}</td>
                                <td>${comment.content}</td>
                                <td>${comment.commentTime}</td>
                                <!-- 在评论列表的每个 tr 中添加修改按钮 -->
                                <td>
                                    <button class="btn btn-primary btn-sm edit-btn" data-id="${comment.id}">修改</button>
                                    <button class="btn btn-danger btn-sm delete-btn" data-id="${comment.id}">删除</button>
                                </td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                    <div class="row">
                        <!--分页文字信息  -->
                        <div class="col-md-8" id="page_info_area"></div>
                        <!-- 分页条信息 -->
                        <div class="col-md-4" id="page_nav_area">

                        </div>
                    </div>
                    <!-- /.panel-body -->
                </div>
                <!-- /.panel -->
            </div>
            <!-- /.col-lg-12 -->
        </div>
    </div>
    <!-- 班级列表查询部分  end-->
</div>


<!-- 修改评论的模态框 -->
<div class="modal fade" id="editCommentModal" tabindex="-1" role="dialog" aria-labelledby="editCommentModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editCommentModalLabel">修改评论</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="editCommentForm">
                    <div class="form-group">
                        <label for="editContent">评论内容</label>
                        <textarea class="form-control" id="editContent" rows="3" required></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="submit" class="btn btn-primary" form="editCommentForm">保存更改</button>
            </div>
        </div>
    </div>
</div>
<!-- 查询结果的模态框 -->
<div class="modal fade" id="searchResultModal" tabindex="-1" role="dialog" aria-labelledby="searchResultModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="searchResultModalLabel">查询结果</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <table class="table table-bordered table-striped" id="search_result_table">
                    <thead>
                    <tr>
                        <th>评论编号</th>
                        <th>评论人</th>
                        <th>评论动物</th>
                        <th>评论内容</th>
                        <th>评论时间</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!-- 引入js文件 -->
<!-- jQuery -->
<script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.min.js"></script>
<script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/admin/metisMenu.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/admin/jquery.dataTables.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/admin/dataTables.bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/admin/sb-admin-2.js"></script>
<!-- 编写js代码 -->
<script>

    $(document).ready(function() {
        $('#searchForm').submit(function(e) {
            e.preventDefault(); // 阻止表单的默认提交行为
            var userName = $('#findByName').val(); // 获取输入的用户名

            $.ajax({
                url: '${pageContext.request.contextPath}/admin/CommentFindByName', // 确保这个 URL 与您的 Servlet 映射匹配
                type: 'GET',
                data: { userName: userName },
                success: function(response) {
                    var rows = '';
                    $.each(response, function(index, comment) {
                        rows += '<tr><td>' + comment.id + '</td><td>' + comment.user.userName + '</td><td>' + comment.pet.petName + '</td><td>' + comment.content + '</td><td>' + comment.commentTime + '</td></tr>';
                    });
                    $('#search_result_table tbody').html(rows); // 更新模态框中的表格内容
                    $('#searchResultModal').modal('show'); // 显示模态框
                },
                error: function() {
                    alert('查询失败，请稍后再试');
                }
            });
        });
    });

        $(document).ready(function() {
            // 修改按钮点击事件
            $('.edit-btn').click(function() {
                var commentId = $(this).data('id');
                var commentContent = $(this).closest('tr').find('td:eq(3)').text();
                $('#editContent').val(commentContent);
                $('#editCommentModal').modal('show');
            });

            // 修改表单提交事件
            $('#editCommentForm').submit(function(e) {
                e.preventDefault();
                var content = $('#editContent').val();
                var commentId = $('.edit-btn').data('id');

                $.ajax({
                    url: '${pageContext.request.contextPath}/admin/CommentUpdate', // 确保这个 URL 与您的 Servlet 映射匹配
                    type: 'POST',
                    data: { id: commentId, content: content },
                    success: function(response) {
                        if (response.success) {
                            // 更新表格内容
                            $('#editCommentModal').modal('hide');
                            location.reload(); // 刷新页面以显示更新后的内容
                        } else {
                            alert(response.error);
                        }
                    },
                    error: function() {
                        alert('修改失败，请稍后再试');
                    }
                });
            });
        });


    $(document).ready(function() {
        // 删除按钮点击事件
        $(document).on('click', '.delete-btn', function() {
            var commentId = $(this).data('id');
            if (confirm('确定要删除这条评论吗？')) {
                $.ajax({
                    url: '${pageContext.request.contextPath}/admin/CommentDelete',
                    type: 'POST',
                    data: { id: commentId },
                    success: function(response) {
                        if (response.success) {
                            // 刷新页面以显示最新的评论列表
                            location.href='${pageContext.request.contextPath}/admin/CommentList';
                        } else {
                            alert(response.error);
                        }
                    },
                    error: function() {
                        alert('删除失败，请稍后再试');
                    }
                });
            }
        });
    });
</script>
</body>
</html>
